<template>
  <div class="individuation">
	   <el-carousel :interval="4000" type="card" height="200px">
	     <el-carousel-item v-for="(item,index) in bannerList" :key="index">
	       <el-image
	            style="width: 100%; height: 100%"
	            :src="item.imageUrl"></el-image>
	     </el-carousel-item>
	   </el-carousel>
	   <h5>推荐歌单</h5>
	   <play-list :playList="playList"></play-list>
	   <h5>独家放送</h5>
	   <private-content :privatecontentList="privatecontentList"></private-content>
	   <h5 class="new-song">最新音乐</h5>
	   <new-song :newsongList="newsongList"></new-song>
  </div>
</template>

<script>
import {_getBanner,_getRecommend,_getPrivateContent,_getNewSong} from "network/individuation.js"
import PlayList from '@/components/content/play-list/play-list'
import PrivateContent from './childsPage/private-content'
import NewSong from './childsPage/new-song'
export default {
  name:'Individuation',
  components:{PlayList,PrivateContent,NewSong},
  data(){
    return{
      bannerList:[],
      playList:[],
	  privatecontentList:[],
	  newsongList:[],
    }
  },
  created(){
	  this.getList()
  },
  methods:{
    getList(){
		_getBanner().then(res=>{
			this.bannerList = res.data.banners.splice(0,6);		
		})
		_getRecommend().then(res=>{
			this.playList=res.data.result.splice(0,10)
		})
		_getPrivateContent().then(res=>{
			this.privatecontentList=res.data.result
		})
		_getNewSong().then(res=>{
			this.newsongList=res.data.result
		})
	}
  }
}
</script>

<style lang="less" scoped>
	.individuation{
		padding: 20px 70px;
	}
     .el-carousel__item h3 {
       color: #475669;
       font-size: 14px;
       opacity: 0.75;
       line-height: 200px;
       margin: 0;
     }
     
     .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
     }
     
     .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
     }
	 .new-song:after{
		 margin-top: 10px;
		 content:"";
		 display:block;
		 width: 100%;
		 height: 1px;
		 background-color: #b8b6b6;
	 }
</style>